<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!--设置文档的字符编码-->
    <meta charset="utf-8">
    <!--指IE8及以前版本渲染的引擎-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--将视口的内容设置为(移动设备优先)：
    device-width：设备宽度，
    initial-scale=1：初始化的比例为100%，
    maximum-scale=1：最大比例为100%
    user-scalable=no：移动端对页面的绽放比例
-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>bootstrap4</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/assets/js/frontend/screen/css/bootstrap.css"/>
    <!-- 自定义的样式文件：主要设置div的边框 -->
    <link rel="stylesheet" type="text/css" href="/assets/js/frontend/screen/css/style.css"/>

</head>

<body>

<div class="container_box">
    <div class="table-responsive tablebox">

            <table class="table table-striped table-hover table-borderless" id="tableId">

                <thead>
                <tr style="background-color: black">
                    <th scope="col"></th>
                    <th scope="col">头像</th>
                    <th scope="col">姓名</th>
                    <th scope="col">性别</th>
                    <th scope="col">年龄</th>
                    <th scope="col">访问门店</th>
                    <th scope="col">浏览情况</th>
                </tr>
                </thead>

                <tbody>
                <tr>
                    <td scope="row"><span class="badge badge-pill text-center badge-info number">1</span></td>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td><div>李某</div></td>
                    <td><div>男</div></td>
                    <td><div>20</div></td>
                    <td><div>1111</div></td>
                    <td><div>在30分钟前浏览了DW/天梭</div></td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill text-center badge-info number">1</span></td>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td><div>李某</div></td>
                    <td><div>男</div></td>
                    <td><div>20</div></td>
                    <td><div>1111</div></td>
                    <td><div>在30分钟前浏览了DW/天梭</div></td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>张某</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小明</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小红</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill text-center badge-info number">1</span></th>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>小刘</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>老王</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小刘</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>

                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>老王</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>小刘</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <th scope="row"><span class="badge badge-pill badge-info number">1</span></th>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>老王</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小刘</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>老王</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/bs.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid" src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>老王</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>
                <tr>
                    <td scope="row"><span class="badge badge-pill badge-info number">1</span></td>
                    <td><img class="img-fluid"  src="/assets/js/frontend/screen/img/headicon02.png"/></td>
                    <td>小天</td>
                    <td>男</td>
                    <td>20</td>
                    <td>1111</td>
                    <td>在30分钟前浏览了DW/天梭</td>
                </tr>

                </tbody>
            </table>

    </div>

</div>
<!-- bootstrap需要依赖于jQuery库，jQuery库必须在bootstrap的js库之前引入 -->
<script src="/assets/js/frontend/screen/js/jquery-3.2.1.js"></script>
<!-- 引入bootstrap的js库 -->
<script src="/assets/js/frontend/screen/js/bootstrap.js"></script>
<script src="/assets/js/frontend/screen/js/style.js"></script>
<script>
    // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
    tableScroll('tableId', 500, 30, 5)
    var MyMarhq;

    function tableScroll(tableid, hei, speed, len) {
        clearTimeout(MyMarhq);
        $('#' + tableid).parent().find('.tableid_').remove();

        $('#' + tableid).parent().prepend(
            '<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'

        ).css({
            'position': 'relative',
            'overflow': 'hidden',
            'height': hei + 'px'
        })
        $(".tableid_").find('th').each(function(i) {
          // alert( $('#' + tableid).find('thead > tr > th:eq('+i+')').width());
           //alert($('#' + tableid).find('tbody > tr:first-child > td:eq(' + i + ')').outerWidth());
            $(this).css('width', $('#' + tableid).find('thead > tr > th:eq('+i+')').outerWidth());
        });
        $(".tableid_").find('th').css("padding","0.75rem");


        $(".tableid_").css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'z-index': 9
        })
        $('#' + tableid).css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'z-index': 1
        })

        if($('#' + tableid).find('tbody tr').length > len) {
            $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
            $(".tableid_").css('top', 0);
            $('#' + tableid).css('top', 0);
            var tblTop = 0;
            var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();


            function Marqueehq() {
                if(tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
                    tblTop = 0;
                } else {
                    tblTop -= 1;
                }
                $('#' + tableid).css('margin-top', tblTop + 'px');
                clearTimeout(MyMarhq);
                MyMarhq = setTimeout(function() {
                    Marqueehq()
                }, speed);
            }

            MyMarhq = setTimeout(Marqueehq, speed);
            $('#' + tableid).find('tbody').hover(function() {
                clearTimeout(MyMarhq);
            }, function() {
                clearTimeout(MyMarhq);
                if($('#' + tableid).find('tbody tr').length > len) {
                    MyMarhq = setTimeout(Marqueehq, speed);
                }
            })
        }

    }
</script>

</body>

</html>